import 'package:acgn_pioneer/widgets/reader/barrage/slide/barrage_controller.dart';
import 'package:acgn_pioneer/widgets/reader/mixins/widget_base.dart';
import 'package:flutter/widgets.dart';
import '../../../public.dart';

/// 弹幕设置
class ReaderBarrageSetting extends StatefulWidget {
  final ChapterModel chapterModel;
  final BarrageController barrageController;

  ReaderBarrageSetting({Key key, this.chapterModel, this.barrageController})
      : super(key: key);

  @override
  ReaderBarrageSettingState createState() => ReaderBarrageSettingState();
}

class ReaderBarrageSettingState extends State<ReaderBarrageSetting>
    with ReaderWidgetBase {
  double sliderOpacityValue = 0;
  double sliderSpeedValue = 0;
  String speedInfo = '正常';
  String opacityInfo = '50%';
  Map<String, String> speedText = {
    '0': '很慢',
    '25': '慢',
    '50': '正常',
    '75': '快',
    '100': '很快'
  };

  @override
  void initState() {
    super.initState();

    updateSlider(barrageSetting.opacity, 1);
    updateSlider(barrageSetting.speed, 2);
  }

  @override
  void dispose() {
    super.dispose();
  }

  BarrageSetting get barrageSetting {
    return widget.barrageController.barrageSetting;
  }

  @override
  Widget build(BuildContext context) {
    var textStyle = TextStyle(color: Colors.white, fontSize: 16);
    var textStyleLight = TextStyle(
        color: ColorUtil.rgba(255, 215, 59, 1), fontSize: 16, height: 1.6);
    return Container(
        height: 200,
        padding: EdgeInsets.only(left: 10, right: 10, top: 30, bottom: 20),
        decoration: BoxDecoration(
          color: ColorUtil.rgba(27, 27, 38, 1),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15), topRight: Radius.circular(15)),
        ),
        child: SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: ColorUtil.rgba(255, 215, 59, 1), //实际进度的颜色
              inactiveTrackColor: ColorUtil.rgba(255, 255, 255, 0.4), //默认进度条的颜色
              inactiveTickMarkColor: Colors.white, //对进度线间隔的颜色
              thumbColor: Colors.white, //滑块中心的颜色
              tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 2),
              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 6),
              overlayShape: RoundSliderOverlayShape(overlayRadius: 12),
              overlayColor: ColorUtil.rgba(255, 255, 255, 0.4), //滑块边缘颜色
            ),
            child: Column(
              children: [
                Container(
                    padding: EdgeInsets.only(left: 10),
                    child: Row(children: [
                      Text(
                        '不透明度',
                        style: textStyle,
                      ),
                      SizedBox(width: 6),
                      Text(opacityInfo, style: textStyleLight)
                    ])),
                Container(
                    margin: EdgeInsets.only(top: 4),
                    child: Slider(
                        value: sliderOpacityValue,
                        max: 100,
                        onChanged: (value) {
                          updateSlider(value, 1);
                        })),
                Container(
                    margin: EdgeInsets.only(top: 20),
                    padding: EdgeInsets.only(left: 10),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          '速度',
                          style: textStyle,
                        ),
                        SizedBox(width: 6),
                        Text(speedInfo, style: textStyleLight)
                      ],
                    )),
                Container(
                    margin: EdgeInsets.only(top: 4),
                    child: Slider(
                        value: sliderSpeedValue,
                        max: 100,
                        divisions: 4,
                        onChanged: (value) {
                          updateSlider(value, 2);
                        }))
              ],
            )));
  }

  void updateSlider(double value, int type) {
    var valStr = value.toInt().toString();
    if (type == 1) {
      sliderOpacityValue = value;
      opacityInfo = valStr + '%';
      barrageSetting.opacity = value;
    } else {
      speedInfo = speedText[valStr];
      sliderSpeedValue = value;
      barrageSetting.speed = value;
    }
    setState(() {});
  }
}
